import { useEffect, useImperativeHandle, useState, type MutableRefObject } from 'react';
import { Avatar, Checkbox, Input } from 'antd';
import { CloseOutlined } from '@ant-design/icons';
import { DeleteUserStyle } from './style';
import type { MembersRes } from '../../http/chatting-group-members';
import type { SearchProps } from 'antd/es/input';
import type { CheckboxGroupProps } from 'antd/es/checkbox';
import { serverURL } from '../../config';

interface UserInfo {
	id: number;
	realname: string;
	avatar: string;
	inGroup: boolean;
}
export interface DeleteUserRef {
	selectedUsers: UserInfo[];
}
type DeleteUserProps = {
	membersList: MembersRes[];
	comRef: MutableRefObject<DeleteUserRef>;
};
const DeleteUser = (props: DeleteUserProps) => {
	const { membersList, comRef } = props;

	const [userList, setUserList] = useState<UserInfo[]>([]);
	const [selectedUsersId, setSelectedUsersId] = useState<number[]>([]);
	const [selectedUsers, setSelectedUsers] = useState<UserInfo[]>([]);

	const mapUserList = (list: MembersRes[]) => {
		setUserList(
			list.map((item) => ({
				id: item.id,
				realname: item.nickName,
				avatar: item.avatar,
				inGroup: selectedUsers.findIndex((user) => user.id === item.userId) !== -1
			}))
		);
	};
	useEffect(() => {
		if (membersList) {
			mapUserList(membersList);
		}
	}, []);

	// 用户名搜索
	const handleSearch: SearchProps['onSearch'] = (value) => {
		if (value) {
			const newList = [...userList];
			const filterName = newList.filter((item) => item.realname.includes(value));
			setUserList(filterName);
		} else {
			mapUserList(membersList);
		}
	};

	// 选择用户
	const handleSelectUser: CheckboxGroupProps<number>['onChange'] = (values) => {
		setSelectedUsersId(values);
	};
	const handleUserClick = (user: UserInfo) => {
		const newList = [...selectedUsers];
		const index = newList.findIndex((item) => item.id === user.id);
		if (index === -1) {
			newList.push(user);
		} else {
			newList.splice(index, 1);
		}
		setSelectedUsers(newList);
	};

	// 删除已选择的用户
	const handleDelUser = (user: UserInfo, index: number) => {
		const newUsersList = [...selectedUsers];
		const newUsersId = [...selectedUsersId];
		const findIndex = newUsersId.findIndex((id) => id === user.id);
		if (findIndex !== -1) {
			newUsersId.splice(findIndex, 1);
			setSelectedUsersId(newUsersId);
		}
		newUsersList.splice(index, 1);
		setSelectedUsers(newUsersList);
	};

	useImperativeHandle(comRef, () => ({ selectedUsers }));

	return (
		<DeleteUserStyle is_del>
			<div className="select_user">
				<div className="left_select">
					<div className="search_name">
						<Input.Search allowClear placeholder="请输入用户名" onSearch={handleSearch} />
					</div>
					<div className="user_list">
						<Checkbox.Group value={selectedUsersId} onChange={handleSelectUser}>
							{userList.map((item) => (
								<div key={item.id} className="user_item">
									<Checkbox
										value={item.id}
										disabled={item.inGroup}
										onClick={() => handleUserClick(item)}
									>
										<div className="item">
											<Avatar size={35} shape="square" src={serverURL + item.avatar} />
											<div className="user_name">{item.realname}</div>
										</div>
									</Checkbox>
								</div>
							))}
						</Checkbox.Group>
					</div>
				</div>
				<div className="right_selected">
					{selectedUsers.map((item, index) => (
						<div key={item.id} className="item_info">
							<Avatar
								className="item_avatar"
								shape="square"
								size={45}
								src={serverURL + item.avatar}
							/>
							<div className="item_name">{item.realname}</div>
							<div className="del_btn" onClick={() => handleDelUser(item, index)}>
								<CloseOutlined />
							</div>
						</div>
					))}
				</div>
			</div>
		</DeleteUserStyle>
	);
};

export default DeleteUser;
